<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../css/easyui.css">
<link rel="stylesheet" type="text/css" href="../css/mobile.css">
</head>
<!-- BEGIN PAGE CONTAINER-->
<div id="pageContainer" class="container-fluid">
    <!-- BEGIN PAGE HEADER-->
    <div class="row-fluid">
        <div class="span12">
            <!-- BEGIN PAGE TITLE & BREADCRUMB-->
            <h3 class="page-title">财富 - GPS <small id="displayTitle"></small>


        </h3>
            <ul class="breadcrumb">
                <li><a href="index"><i class="icon-home"></i></a><span class="divider"></span></li>
                <li><a href="#">财富 - 账户</a> <span class="divider">&nbsp;</span></li>

        </ul> <!-- END PAGE TITLE & BREADCRUMB-->
    </div>
</div> <!-- END PAGE HEADER--> <!-- BEGIN PAGE CONTENT-->
    <div id="page" class="dashboard">
        <!-- BEGIN OVERVIEW Over All BLOCKS-->




        <div class="row-fluid circle-state-overview">
            <div class="span8">
                <div class="widget">
                    <div class="widget-title">
                        <h4><i class=" icon-credit-card"></i> 账户概况</h4> <small></small> <span class="tools"> <a href="javascript:;" class="icon-chevron-down"></a> <a href="javascript:;"
                            class="icon-remove"
                        ></a>
                    </span>
                </div>
                    <div class="widget-body">
                        <div class="row-fluid circle-state-overview">
                            <div class="span6 responsive clearfix" data-tablet="span3" data-desktop="span6">
                                <div class="circle-wrap">
                                    <div class="stats-circle turquoise-color"><i class="icon-money" tiptext="收入账户"></i></div>
                                    <p><strong>本月收入为 10000元</strong></p> <strong><a href="#incomeDetail">收入账户详细</a> <a href="#addIncome">添加收入</a> </strong>
                            </div>
                        </div>

                            <div class="span6 responsive" data-tablet="span3" data-desktop="span6">
                                <div class="circle-wrap">
                                    <div class="stats-circle green-color"><i class=" icon-shopping-cart" tiptext="支出账户"></i></div>
                                    <p><strong>本月收入为 10000元</strong></p> <strong><a href="#outcomeDetail">支出账户详细</a> <a href="#addOutcome">添加支出</a> </strong>
                            </div>
                        </div>

                    </div>
                </div> <!-- END OVERVIEW STATISTIC BLOCKS-->
            </div>
        </div>
            <div class="span4">
                <!-- BEGIN ALERTS PORTLET-->
                <div class="widget">
                    <div class="widget-title">
                        <h4><i class="icon-bell-alt"></i> 账户预算情况</h4> <span class="tools"> <a href="javascript:;" class="icon-chevron-down"></a> <a href="javascript:;" class="icon-remove"></a>
                    </span>
                </div>
                    <div class="widget-body" id="budgetChart">
                    
                    <div><strong><a href="#addInBudget">添加收入预算</a> </strong>
                    <strong><a href="#addOutBudget">添加支出预算</a> </strong></div>
                    </div>
                    
            </div> <!-- END ALERTS PORTLET-->
        </div>

    </div> <!-- Start goal-->
        <div cneass="row-fluid">
            <div class="span6"><a name="incomeDetail"></a> <!-- Start Portifio Summary-->
                <div class="widget widget-tabs">
                    <div class="widget-title">
                        <h4><i class="icon-reorder"></i>收入详细</h4>
                </div>
                    <div class="widget-body">
                        <div class="tabbable portlet-tabs">
                            <ul class="nav nav-tabs">
                                <li class="active"><a href="#inAcc_tab3" data-toggle="tab">饼图</a></li>
                                <li class=""><a href="#inAcc_tab2" data-toggle="tab">柱状图</a></li>
                                <li class=""><a href="#inAcc_tab1" data-toggle="tab">列表</a></li>
                        </ul>
                            <div class="tab-content">
                                <div class="tab-pane" id="inAcc_tab1">

                                    <table id="incomeAccDBGrid"
                                    data-options="
                header:'#inAcchh',
                iconCls: 'icon-edit',
                singleSelect: true,
                fit:true,
                fitColumns:true,
                border: false,
                scrollbarSize: 0,
                data: data,
                onClickRow: onClickRow
            "
                                >
                                        <thead>
                                            <tr>
                                                <th data-options="field:'inAccDate',width:80,editor:'textbox'">消费日期</th>
                                                <th data-options="field:'inAccType',width:80,editor:'textbox'">类型</th>
                                                <th data-options="field:'inAccAmount',width:80,align:'right',editor:{type:'numberbox',options:{precision:2}}">金额</th>
                                                <th data-options="field:'inAccDescription',width:200,editor:'textbox'">更多描述</th>

                                        </tr>
                                    </thead>
                                </table>
                                    <div id="inAcchh">
                                        <div class="m-toolbar">
                                            <div class="m-right"><a href="javascript:void(0)" onclick="removeit()"><span class="icon-box"><i class=" icon-remove"></i></span>删除当前</a> <a
                                                href="javascript:void(0)" onclick="accept()"
                                            ><span class="icon-box"><i class="icon-save"></i></span>保存操作</a> <a href="javascript:void(0)" onclick="reject()"><span class="icon-box"><i
                                                        class="icon-undo"
                                                    ></i></span>放弃操作</a></div>
                                    </div>
                                </div>



                            </div>
                                <div class="tab-pane" id="inAcc_tab2"></div>
                                <div class="tab-pane active" id="inAcc_tab3"></div>
                        </div>
                    </div>
                </div>
            </div> <!-- End Portifio Summary--></div>

            <div class="span6"><a name="addIncome"></a> <!-- Start Portifio Summary-->
                <div class="widget">
                    <div class="widget-title">
                        <h4><i class="icon-bar-chart"></i> 添加收入</h4> <span class="tools"> <a href="javascript:;" class="icon-chevron-down"></a> <a href="javascript:;" class="icon-remove"></a>
                    </span>
                </div>
                    <div class="widget-body">
                        <!-- BEGIN FORM-->

                        <form action="addIncome" class="form-horizontal" method="POST">

                            <div class="control-group"><label class="control-label">类别：</label>
                                <div class="controls"><select class="span12 " tabindex="1" id="incometype">
                                        <option value="0">工资收入</option>
                                        <option value="1">兼职</option>
                                        <option value="2">财产性收入</option>
                                        <option value="3">其他</option>

                                </select></div></div> 日期：<br> <input id="incomedate" type="date">
                                 <br> 金额：<br> <input class="sy-textline input_tip" id="incomeamount"
                            type="number"
                        >元 <br> 备注：<br> <input class="sy-textline input_tip" id="incomedesc" type="text">
                </div>
                    <div class="form-actions">
                        <button id="incomeSubmit" type="submit" class="btn blue"><i class="icon-ok"></i> 提交</button>
                </div>
                    </form> <!-- END FORM-->


            </div></div> <!-- End Portifio Summary-->
    </div>
</div> <!-- Start portifolio-->
    <div cneass="row-fluid">
        <div class="span6"><a name="outcomeDetail"></a> <!-- Start Portifio Summary-->
            <div class="widget widget-tabs">
                <div class="widget-title">
                    <h4><i class="icon-reorder"></i>支出详细</h4>
            </div>
                <div class="widget-body">
                    <div class="tabbable portlet-tabs">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#portlet_tab3" data-toggle="tab">饼图</a></li>
                            <li class=""><a href="#portlet_tab2" data-toggle="tab">柱状图</a></li>
                            <li class=""><a href="#outAcc_tab1" data-toggle="tab">列表</a></li>
                    </ul>
                        <div class="tab-content">
                            <div class="tab-pane" id="outAcc_tab1">
                                <table id="outAccDBGrid"
                                data-options="
                header:'#outAcchh',
                iconCls: 'icon-edit',
                singleSelect: true,
                fit:true,
                fitColumns:true,
                border: false,
                scrollbarSize: 0,
                data: data,
                onClickRow: onClickRow
            "
                            >
                                    <thead>
                                        <tr>
                                            <th data-options="field:'date',width:80,editor:'textbox'">消费日期</th>
                                            <th data-options="field:'type',width:80,editor:'textbox'">类型</th>
                                            <th data-options="field:'amount',width:80,align:'right',editor:{type:'numberbox',options:{precision:2}}">金额</th>
                                            <th data-options="field:'description',width:200,editor:'textbox'">更多描述</th>

                                    </tr>
                                </thead>
                            </table>
                                <div id="outAcchh">
                                    <div class="m-toolbar">
                                        <div class="m-right"><a href="javascript:void(0)" onclick="removeit()"><span class="icon-box"><i class=" icon-remove"></i></span>删除当前</a> <a
                                            href="javascript:void(0)" onclick="accept()"
                                        ><span class="icon-box"><i class="icon-save"></i></span>保存操作</a> <a href="javascript:void(0)" onclick="reject()"><span class="icon-box"><i
                                                    class="icon-undo"
                                                ></i></span>放弃操作</a></div>
                                </div>
                            </div>


                        </div>
                            <div class="tab-pane" id="portlet_tab2"></div>
                            <div class="tab-pane active" id="portlet_tab3"></div>
                    </div>
                </div>
            </div>
        </div> <!-- End Portifio Summary--></div>

        <div class="span6"><a name="addOutcome"></a> <!-- Start Portifio Summary-->
            <div class="widget">
                <div class="widget-title">
                    <h4><i class="icon-bar-chart"></i> 添加支出</h4> <span class="tools"> <a href="javascript:;" class="icon-chevron-down"></a> <a href="javascript:;" class="icon-remove"></a>
                </span>
            </div>
                <div class="widget-body">
                    <!-- BEGIN FORM-->
                    <form id="addOutcome" class="form-horizontal">

                        <div class="control-group"><label class="control-label">类别：</label>
                            <div class="controls"><select class="span12 " tabindex="1" id="outcometype">
                                    <option value="0">食品酒水</option>
                                    <option value="1">衣服饰品</option>
                                    <option value="2">居家物业</option>
                                    <option value="3">行车交通</option>
                                    <option value="4">休闲娱乐</option>
                                    <option value="5>学习进修</option> 
                                        <option value="6">医疗保健</option>
                                    <option value="7">金融保险</option>
                                    <option value="8">其他</option>

                            </select></div></div> 日期：<br> <input id="outcomedate" type="date"> <br> 金额：<br> <input class="sy-textline input_tip" id="outcomeamount"
                        type="number"
                    >元 <br> 备注：<br> <input class="sy-textline input_tip" id="outcomedesc" type="text">
            </div>
                <div class="form-actions">
                    <button id="outcomeSubmit" type="submit" class="btn blue"><i class="icon-ok"></i> 提交</button>
            </div>
                </form> <!-- END FORM-->
        </div></div> <!-- End Portifio Summary-->
</div>
</div>
</div>
<!-- END PAGE CONTENT-->
</div>
<!-- END PAGE CONTAINER-->
<!DOCTYPE html>

<script src="../js/jquery-1.8.3.min.js"></script>
<script src="../js/jquery.easyui.min.js"></script>
<script src="../js/jquery.easyui.mobile.js"></script>
<script type="text/javascript" src="../assets/gps/budget.js"></script>

<script>
var data;

$(document).ready(function(){
   	var displayname=$("#displayname").val();
   	var id=$("#id").val();
   
       $("#displayTitle").append(displayname+"的财富导航");         
       data= 	[
     			{"inAccDate":"12-03-2016","inAccType":"工资收入","inAccAmount":10.00,"inAccDescription":"P"},
     			{"inAccDate":"12-03-2016","inAccType":"其他收入","inAccAmount":12.00,"inAccDescription":"P"}
     		];
       }); 
		
		$(function(){
			$('#incomeAccDBGrid').datagrid({			
				data: data			
			});
		});
   
   
     		
     		var editIndex = undefined;
     		function endEditing(){
     			if (editIndex == undefined){return true}
     			if ($('#incomeAccDBGrid').datagrid('validateRow', editIndex)){
     				$('#incomeAccDBGrid').datagrid('endEdit', editIndex);
     				editIndex = undefined;
     				return true;
     			} else {
     				return false;
     			}
     		}
     		function onClickRow(index){
     			if (editIndex != index){
     				if (endEditing()){
     					$('#incomeAccDBGrid').datagrid('selectRow', index)
     							.datagrid('beginEdit', index);
     					editIndex = index;
     				} else {
     					$('#incomeAccDBGrid').datagrid('selectRow', editIndex);
     				}
     			}
     		}
     		function removeit(){
     			if (editIndex == undefined){return}
     			$('#incomeAccDBGrid').datagrid('cancelEdit', editIndex)
     					.datagrid('deleteRow', editIndex);
     			editIndex = undefined;
     		}
     		function accept(){
     			if (endEditing()){
     				$('#incomeAccDBGrid').datagrid('acceptChanges');
     			}
     		}
     		function reject(){
     			$('#incomeAccDBGrid').datagrid('rejectChanges');
     			editIndex = undefined;
     		}
   
    
    $("#incomeSubmit").click(function(){	
      	var id=$("#id").val();
      	var incometype=$("#incometype").val();
      	var incomedate=$("#incomedate").val();
      	var incomeamount=$("#incomeamount").val();
      	var incomedesc=$("#incomedesc").val();
      	      	
      	var data={"id":id, "type":incometype,"date":incomedate, "amount":incomeamount,"description":incomedesc};
      	   	  	
      	$.ajax({
  			type : "POST",
  			contentType : "application/json",
  			url : "/newIncomeAcc",
  			data : JSON.stringify(data),
  			dataType : 'json',
  			timeout : 10000,
  			success : function(data) {  				
  				alert("success");
  			},
  			error : function(XMLHttpRequest, textStatus, errorThrown) {
                 alert(XMLHttpRequest.status);
                 alert(XMLHttpRequest.readyState);
                 alert(textStatus);
             },
  			done : function(e) {
  				alert("done");
  			}
  		});
      	
      	    });
    
    $("#outcomeSubmit").click(function(){	
    	
    	var id=$("#id").val();
      	var outcometype=$("#outcometype").val();
      	var outcomedate=$("#outcomedate").val();
      	var outcomeamount=$("#outcomeamount").val();
      	var outcomedesc=$("#outcomedesc").val();
      	
      	var data={"id":id, "type":outcometype,"date":outcomedate, "amount":outcomeamount,"description":outcomedesc};
      	   	  	
      	$.ajax({
  			type : "POST",
  			contentType : "application/json",
  			url : "/newOutcomeAcc",
  			data : JSON.stringify(data),
  			dataType : 'json',
  			timeout : 10000,
  			success : function(data) {  				
  				alert("success");
  			},
  			error : function(XMLHttpRequest, textStatus, errorThrown) {
                 alert(XMLHttpRequest.status);
                 alert(XMLHttpRequest.readyState);
                 alert(textStatus);
             },
  			done : function(e) {
  				alert("done");
  			}
  		});
      	
      	
      	
    });

  
</script>
